<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>

        // 1. 使用createElement 创建元素
        // var div1=document.createElement('div');
        // document.body.appendChild(div1);

        // // 2. 使用innerHTML 创建元素
        // div1.innerHTML='<div></div>'
        
        // 3. 使用 document.write 创建  了解
        // document.write('<div></div>');
        
        // write 会重绘页面

        // var btn=document.querySelector('button');

        // btn.onclick=function(){
        //     // document.write  在页面完全加载完毕后再调用 会重绘页面
        //     document.write('<div>123</div>');
        // }

        // innerHTML  createElement  (运行速度)
        // 在页面画 1000个div
        // 查看运行时间
        // js里面的时间api
            setInterval(() => {
                console.log(1);
            }, 100);
        var date1=new Date();
        // 使用innerhtml 做字符串拼接 花了8s 画了1000个div
        for(var i=0;i<1000;i++){
            document.body.innerHTML += 
            '<div style="width:100px;height:1px;border:1px solid red"></div>'
        }

        //使用 createElement ()  0.2s 画1000个div
        // for(var i=0;i<1000;i++){
        //     var div1=document.createElement('div');
        //     div1.style.width='100px'
        //     div1.style.height='1px'
        //     div1.style.border='1px solid red'
        //     document.body.appendChild(div1);
            
        // }

        // 使用数组方法创建  0.02s 画1000个div
        // 面试的时候会问
        // 1.页面中创建元素的方法有那些？
        // 2. 这三种方法执行效率有什么区别
        // 如果innerHtml 做字符串拼接 效率会很慢
        // createElement 效率会高
        // // 但是如果做数组拼接  innerhtml效率会高
        // var arr=[];
        // for(var i=0;i<1000;i++){
        //     // push()  往结尾添加一个数据
        //     arr.push('<div style="width:100px;height:1px;border:1px solid red"></div>');
        // }
        // // 将数组所有元素以join里面的参数进行拼接
        // document.body.innerHTML = arr.join('');

        var date2=new Date();
        console.log(date2-date1);
    </script>
</body>
</html>